<!DOCTYPE html>
<html lang="en" ng-app="productAddApp">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <!-- bootstrap 样式 -->
    <link rel="stylesheet" href="../../../static/component/bootstrap-3.3.7/css/bootstrap.css"/>
    <!-- font-awesome -->
    <link rel="stylesheet" href="../../../static/component/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="../../../static/css/animate.css" rel="stylesheet">
    <link href="../../../static/css/default.css" rel="stylesheet">
    <link href="../../../static/component/gm/css/gm.css" rel="stylesheet">
    <!-- jqueryjs -->
    <script type="text/javascript" src="../../../static/js/jquery-2.2.4.min.js"></script>
    <!-- angularjs -->
    <script type="text/javascript" src="../../../static/component/angular/angular.min.js"></script>
    <!-- layer -->
    <script type="text/javascript" src="../../../static/component/layer-v3.0.3/layer/layer.js"></script>
    <!-- 基础js -->
    <script type="text/javascript" src="../../../static/component/angular/api.js"></script>
    <script type="text/javascript" src="../../../static/component/angular/const.js"></script>
    <script type="text/javascript" src="../../../static/component/angular/request.js"></script>
    <script type="text/javascript" src="../../../static/js/win10.child.js"></script>
    <script type="text/javascript" src="../../../static/component/gm/js/gm.js"></script>
</head>
<body ng-controller="productAddCtr">
<div class="row" style="padding: 10px">
    <form name="myForm" novalidate>
        <div class="col-lg-2">
            <div class="input-group">
                <span class="input-group-addon">商品名称</span>
                <input type="text" class="form-control" placeholder="商品名称" name="productName" required="required"
                       aria-describedby="sizing-addon1" ng-model="addModel.productName">
            </div>
        </div>
        <div class="col-lg-2">
            <div class="input-group">
                <span class="input-group-addon">大类</span>
                <select class="form-control" name="parentCategoryId" required="required"
                        aria-describedby="sizing-addon1" ng-model="addModel.parentCategoryId"
                        ng-change="onChangeParentCategory(addModel.parentCategoryId)">
                    <option ng-repeat="item in parentCategoryList" value="{{item.id}}"
                            ng-bind="item.categoryName"></option>
                </select>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="input-group">
                <span class="input-group-addon">小类</span>
                <select class="form-control" name="categoryId" required="required"
                        aria-describedby="sizing-addon1" ng-model="addModel.categoryId">
                    <option ng-repeat="item in categoryList" value="{{item.id}}"
                            ng-bind="item.categoryName"></option>
                </select>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="input-group">
                <span class="input-group-addon">品牌</span>
                <select class="form-control" name="brandId" required="required"
                        aria-describedby="sizing-addon1" ng-model="addModel.brandId">
                    <option ng-repeat="item in brandList" value="{{item.id}}"
                            ng-bind="item.brandName"></option>
                </select>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="input-group">
                <span class="input-group-addon">厂家</span>
                <select class="form-control" name="supplierId" required="required"
                        aria-describedby="sizing-addon1" ng-model="addModel.supplierId">
                    <option ng-repeat="item in supplierList" value="{{item.id}}"
                            ng-bind="item.supplierName"></option>
                </select>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="input-group">
                <div class="form-group">
                    <label for="files">图片</label>
                    <input type="file" id="files" multiple="multiple" onchange="changepic(this)"/>
                </div>
            </div>
        </div>
        <input type="submit" class="btn btn-primary" ng-click="onClickSave()"
               ng-disabled="myForm.productName.$dirty && myForm.productName.$invalid || addModel.productName == null"
               value="保存"/>
    </form>
    <div id="imgFiles" style="margin: 80px 20px">
    </div>
</div>
<table class="table table-striped"></table>
</body>
<script>

    var i = 0;

    function changepic(obj) {
        let files = obj.files;
        let str = "";
        document.getElementById("imgFiles").innerHTML = "";
        for (const file of files) {
            //调用getObjectURL函数，返回上传的图片的地址
            var newsrc = getObjectURL(file);
            str += "<img src=\"" + newsrc + "\" width=\"200\"/>"
        }
        $("#imgFiles").append(str);
    }

    //建立一个可存取到该file的url
    function getObjectURL(file) {
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>
<script src="./productUploadController.js" type="text/javascript"></script>
</html>